<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>初次登录Creative Dragon</title>
    <style>
        body {
            font-family: Arial, sans-serif;
        }
        .container {
            width: 500px; /* 调整容器宽度 */
            margin: 0 auto;
        }
        .title {
            font-size: 24px;
            color: black;
            text-align: center;
                margin-bottom: 20px;
        }
        .subtitle {
            font-size: 16px;
            color: black;
            text-align: center;
                margin-bottom: 20px;
        }
        .register-info {
            background-color: purple;
            color: white;
            padding: 10px;
                margin-bottom: 20px;
        }
        .form-container {
            background-color: #f9f9f9;
            padding: 20px;
            border-radius: 5px;
            margin-top: 20px;
        }
        .form-row {
            margin-bottom: 20px;
            display: flex;
            align-items: center;
        }
        .form-row label {
            flex: 1;
        }
        .form-control {
            flex: 2;
            padding: 10px;
            border: 1px solid #ccc;
            border-radius: 5px;
        }
        .form-control:focus {
            outline: none;
            border-color: dodgerblue;
        }
        .required {
            color: red;
        }
        .hint {
            font-size: 12px;
            color: #888;
            flex: 1;
        }
        .checkbox-container {
            display: flex;
            flex-wrap: wrap;
            margin-top: 10px;
        }
        .checkbox-container label {
            flex: 0 0 50%; /* 每行两个选项 */
        }
        .checkbox-container input {
            margin-right: 5px;
        }
        hr {
            border: 1px solid #ccc;
            margin: 20px 0;
        }
        /* 添加额外的样式 */
.hint {
    font-size: 12px;
    color: #888;
    margin-top: -15px; /* 调整上边距使得与输入框对齐 */
    margin-left: 150px; /* 调整左边距使得与输入框对齐 */
}

.button-container {
    text-align: center;
    margin-top: 20px; /* 调整上边距使得按钮与表单有间距 */
}
/* 调整复选框布局 */
.checkbox-container {
    display: flex;
    flex-wrap: wrap;
    margin-top: 10px;
}

.checkbox-container div {
    flex: 0 0 50%; /* 每行两个选项 */
}

/* 调整按钮容器的样式，使按钮居中显示 */
.button-container {
    text-align: center; /* 水平居中 */
    margin-top: 20px; /* 上边距 */
}

/* 调整按钮样式 */
.submit-btn, .clear-btn {
    padding: 10px 20px;
    margin: 10px;
    border: none;
    border-radius: 5px;
    cursor: pointer;
}

.submit-btn {
    background-color: dodgerblue;
    color: white;
}

.clear-btn {
    background-color: #ccc;
}

.submit-btn:hover, .clear-btn:hover {
    background-color: #187bcd;
}

/* 调整文字间距 */

    </style>
</head>
<body>
<div class="container">
    <div class="title">初次登录Creative Dragon</div>
    <div class="subtitle">请填写你的个人信息</div>
    <div class="register-info">在Creative Dragon站点注册</div>
    <div class="form-container">
        <form action="sign" method="post">
            <div class="form-row">
                <label for="username">E-mail 地址：</label>
                <input type="text" name="username" id="username" class="form-control" required>
                <span class="required">*</span>
            </div>
            <div class="hint">例如：john_martin@msn.com or john21@yahoo.com</div>
            <div class="form-row">
                <label for="password">密码：</label>
                <input type="password" name="password" id="password" class="form-control" required minlength="8">
                <span class="required">*</span>
            </div>
            <div class="hint">必须是八位字符或更多</div>
            <div class="form-row">
                <label for="confirm-password">重新输入密码：</label>
                <input type="password" id="confirm-password" class="form-control" required minlength="8">
                <span class="required">*</span>
            </div>
            <p>感兴趣的书籍类别（可选择）：</p>

            <div class="checkbox-container">
                <div>
                    <input type="checkbox" id="children" name="interest" value="children">
                    <label for="children">儿童</label>
                </div>
                <div>
                    <input type="checkbox" id="medical" name="interest" value="medical">
                    <label for="medical">医疗</label>
                </div>
                <div>
                    <input type="checkbox" id="software" name="interest" value="software">
                    <label for="software">软件</label>
                </div>
                <div>
                    <input type="checkbox" id="mythology" name="interest" value="mythology">
                    <label for="mythology">神话</label>
                </div>
                <div>
                    <input type="checkbox" id="engineering" name="interest" value="engineering">
                    <label for="engineering">工程</label>
                </div>
                <div>
                    <input type="checkbox" id="health" name="interest" value="health">
                    <label for="health">健康</label>
                </div>
            </div>
            <hr>
            <div class="button-container">
                <button type="submit" class="submit-btn">提交表单</button>
                <button type="reset" class="clear-btn">清除</button>
            </div>

        </form>
    </div>
</div>
</body>
</html>
